<template>
  <div class="message">
    <div class="header">
      <div class="tou"></div>
      <span>会员信息查询</span>
    </div>
    <el-form label-width="80px" size="mini" class="el-form">
      <el-form-item label="起始时间" class="qq">
        <el-date-picker v-model="CX.date1" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" size="small">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="截止时间" class="qq">
        <el-date-picker v-model="CX.date2" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" size="small">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <el-row class="el-row">
      <el-button type="warning" @click="selectCardSaleRecords()">查询</el-button>
    </el-row>
    <div class="zhongjain"></div>
    <div class="zhongjain1"></div>
    <!-- 会员列表 -->
    <div class="xia">
      <el-table border :data="getMembershipData" size="mini" :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" style="width: 100%">
        <el-table-column prop="cardCode" label="卡号" width="300">
        </el-table-column>
        <el-table-column prop="depName" label="部门名称" width="110">
        </el-table-column>
        <el-table-column prop="employee" label="售卡人" width="100">
        </el-table-column>
        <el-table-column prop="cardSource" label="卡号来源"> </el-table-column>
        <el-table-column prop="cardSaleDate" label="售卡日期">
        </el-table-column>
        <el-table-column prop="cardType" label="卡类型名称"> </el-table-column>
        <el-table-column prop="cardStatus" label="状态">
          <template slot-scope="scope">
            <template v-if="scope.row.cardStatus == 'no'">正常</template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 20, 30]" :page-size="pageSize" layout="total,prev, pager, next, sizes" :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "message",
    // props: {
    // },
    data() {
      return {
        labelPosition: "right",
        formLabelAlign: {
          name: "",
          region: "",
          type: "",
          value: true,
        },
        // 分页器 total
        // 当前页数
        // 每页几条数据
        // 总页数
        pageSize: 10,
        currentPage: 1,
        pageTotal: 1,
        // 会员信息查询结果
        CX: {
          date1: "", //   日期时间
          date2: "",
          value: "", // 部门id
        },
        // val传递值
        // val: {
        //   depId:""
        // },
        // 查询单个部门的售卡记录
        getMembershipData: [],
      };
    },
    methods: {
      // 分页
      // 10 20 30 出触发
      handleSizeChange(value) {
        console.log(value);
        this.pageSize = value;
        localStorage.setItem("pageSize", this.pageSize);
        this.selectCardSaleRecords();
      },
      // 点击第几页触发
      handleCurrentChange(value) {
        localStorage.setItem("pageNum", value);
        console.log(value)
        this.selectCardSaleRecords();
      },
      // 点击查询
      clickdata() {
        localStorage.setItem("pageNum", this.currentPage);
        localStorage.setItem("pageSize", 10);
        this.selectCardSaleRecords();
      },
      // 会员查询单个部门的售卡记录查询列表
      selectCardSaleRecords() {
        console.log(this.val);
        this.$axios
          .selectCardSaleRecords({
            // 开始时间
            startTime: this.CX.date1,
            // 结束时间
            endTime: this.CX.date2,
            // 部门id(必须)
            // depId: Number(this.val.depId),
            depId: Number(this.$route.params.val.depId),
          })
          .then((res) => {
            if (res.code == "200") {
              console.log(res);
              this.getMembershipData = res.data;
              this.pageTotal = res.total
            }
          });
      },
    },
    mounted() {
      this.val = this.$route.params.val;
      this.CX.date1 = this.$route.params.startTime
      this.CX.date2 = this.$route.params.endTime
      console.log(this.val);
      this.selectCardSaleRecords();

    },
  };
</script>
<style scoped>
  .message {
    width: 100%;
    min-width: 1000px;
    background-color: #f7f6f9;
    height: 100vh;
  }

  .tou {
    width: 3.5px;
    height: 17px;
    background-color: #4b71bf;
    margin-top: 2px;
    margin-right: 2px;
  }

  .bgimage img {
    height: 100%;
    width: 100%;
  }

  .header {
    display: flex;
    font-weight: bolder;
    margin-left: 20px;
    margin-right: 50px;
    padding-top: 30px;
  }

  .qq {
    width: 240px;
    margin-right: 50px;
    margin-left: 20px;
  }

  .el-form {
    display: flex;
    margin-top: 20px;
    margin-left: 10px;
  }

  .el-row {
    display: flex;
    justify-content: flex-start;
    margin-left: 40px;
    margin-top: 10px;
  }

  .el-switch {
    margin-top: 8px;
    margin-left: 15px;
  }

  .zhongjain {
    width: 96%;
    height: 1px;
    background-color: rgb(190, 189, 189);
    margin-top: 40px;
    margin-left: 20px;
  }

  .zhongjain1 {
    display: flex;
    justify-content: flex-start;
    margin-left: 20px;
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 16px;
  }

  .box {
    display: flex;
    margin-left: 20px;
    border: 1px solid #e0e0e0;
    width: 96%;
  }

  .box1 {
    height: 323px;
    background-color: #ffffff;
    font-size: 8px;
    text-align: left;
    line-height: 15px;
  }

  .box2 {
    height: 323px;
    width: 1px;
    background-color: #e0e0e0;
  }

  .box1-1 {
    width: 100%;
    height: 21px;
    background-color: #6090ec;
    color: #ffffff;
    font-size: 8px;
    padding-top: 3px;
    /* padding-left: 10px; */
    text-align: center;
  }

  .lan1 {
    color: #2f80ed;
    font-weight: bolder;
    font-size: 9px;
  }

  .hei {
    font-weight: bolder;
    font-size: 8px;
  }

  .a {
    font-size: 7px;
    font-weight: bolder;
    color: #6090ec;
  }

  .box1-2 {
    font-size: 7px;
    padding-left: 10px;
  }

  .hui {
    font-size: 7px;
    color: #4f4f4f;
  }

  .block {
    float: right;
  }
</style>